<template>
	<view id="detailUserPie" class="chart"></view>
</template>

<script>
import * as echarts from "echarts"

export default {
	name: "detailUserPie",
	data() {
		return {}
	},
	mounted() {
		this.init()
	},
	methods: {
		async init() {
			const res = await vk.callFunction({
				url: "admin/business/kh.stats.getUserGenderCountGroup"
			})
			// 渲染图表
			let myChart = echarts.getInstanceByDom(document.getElementById("detailUserPie"))
			if (myChart == null) {
				// 如果不存在，就进行初始化。
				myChart = echarts.init(document.getElementById("detailUserPie"))
			}
			var colorList = [
				{
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "#C478FA" },
						{ offset: 1, color: "#5272FE" }
					]
				},
				{
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "#FACB36" },
						{ offset: 1, color: "#FCBE2E" }
					]
				},
				{
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "#3ED89B" },
						{ offset: 1, color: "#59EBD7" }
					]
				}
			]
			let option = {
				tooltip: { trigger: "item" },
				legend: { orient: "vertical", left: "left" },
				series: [
					{
						type: "pie",
						radius: ["25%", "60%"],
						itemStyle: { borderRadius: 6, borderColor: "#fff", borderWidth: 2,
							color: function(params) {
								return colorList[params.dataIndex]
							}  },
						data: res.data
					}
				]
			}
			myChart.setOption(option)
		}
	}
}
</script>

<style lang="scss" scoped>
.chart {
	width: 100%;
	height: 100%;
}
</style>
